<template>
    <div class="body">
        <div class="top">
            <!-- 区域选择器 -->
            <select class="select_style" v-model="localclassval" @change="selectChange(1)">
                <option value="">无</option>
                <option :value="item.id" v-for="item in localclass" :key="item.id">{{ item.name }}</option>
            </select>
            <!-- 行业选择器 -->
            <select class="select_style" v-model="industryval" @change="selectChange(2)">
                <option value="">无</option>
                <option :value="item.id" v-for="item in industry" :key="item.id">{{ item.name }}</option>
            </select>
            <!-- 规模选择器 -->
            <select class="select_style" v-model="scaleval" @change="selectChange(3)">
                <option value="">无</option>
                <option :value="item.id" v-for="item in scale" :key="item.id">{{ item.name }}</option>
            </select>
            <!-- 投资选择器 -->
            <select class="select_style" v-model="investval" @change="selectChange(4)">
                <option :value="item.id" v-for="item in invest" :key="item.id">{{ item.name }}</option>
            </select>
            <!-- 产值选择器 -->
            <select class="select_style" v-model="outputval" @change="selectChange(5)">
                <option :value="item.id" v-for="item in output" :key="item.id">{{ item.name }}</option>
            </select>
            <!-- 搜索框 -->
            <div class="search_box">
                <input type="text" v-model="searchValue" class="select_style">
                <div class="ones" @click="GetcompanyList()">
                </div>
            </div>
        </div>
        <div class="bottom">
            <table  align='center' style="border-collapse:collapse;">
                <tr>
                    <th style="width: 22.5%;">名称</th>
                    <!-- <th style="width: 10%;">2021年产值</th> -->
                    <th style="width: 10%;">当前年产值</th>
                    <th style="width: 10%;">1-{{month}}月份产值</th>
                    <!-- <th style="width: 9.3%;">2021年税收</th> -->
                    <th style="width: 9.3%;">当前年税收</th>
                    <th style="width: 11%;">1-{{month}}月份税收</th>
                    <th style="width:6.7%">类别</th>
                    <th style="width:6.7%">区域</th>
                    <th style="width:6.7%">占地（平方米）</th>
                    <th style="width:7.7%">联系人</th>
                    <th>电话</th>
                </tr>
                <tr style="height: 5%;" v-for="item in companyList" :key="item.id" @click="tz(item)">
                    <td>{{ item.firmName }}</td>
                    <td>{{ item.moneyCz }}</td>
                    <td>{{ item.sixCz }}</td>
                    <td>{{ item.moneySs }}</td>
                    <td>{{ item.sixSs }}</td>
                    <td>{{ item.industryName }}</td>
                    <td>{{ item.firmAreaName }}</td>
                    <td>{{ item.floorSpace }}</td>
                    <td>{{ item.firmUserName }}</td>
                    <td>{{ item.id }}</td>
                </tr>
                <tr></tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import {useStore} from 'vuex'
import {GetData} from '@/api/index'
import { defineProps,onMounted,ref } from 'vue'
const store=useStore()
const tz=(data)=>{
    store.commit('tcupdata',1)
    store.commit('upCompanydetails',data)
}

// 搜索
const searchValue = ref('')

onMounted(()=>{
    GetcompanyList()
    GetclassList()
    getDate()
})

// 企业数据列表
const companyList = ref([])

// 获取企业数据列表
const GetcompanyList = async ()=>{
    let res = await GetData(`/getFirmList?firmName=${searchValue.value}&firmAreaId=${localclassval.value}&industryId=${industryval.value}&firmScaleId=${scaleval.value}`)
    companyList.value = res
    console.log(res,123123);
}

// 获取类别列表
const localclass = ref([])  // 区域列表
const industry = ref([])  // 行业列表
const scale = ref([])  // 规模列表
const invest = ref([])  // 投资列表
const output = ref([])  // 产值列表
const GetclassList = async ()=>{
    for(let i=1;i<6;i++){
        // 区域
        if(i==1){
            let res = await GetData('/getTypeList?type=QYT')
            localclass.value = res
        }else if(i==2){
            // 行业
            let res = await GetData('/getTypeList?type=HY')
            industry.value = res
        }else if(i==3){
            // 规模
            let res = await GetData('/getTypeList?type=GM')
            scale.value = res
        }else if(i==4){
            // 投资
            let res = await GetData('/getTypeList?type=TZ')
            invest.value = res
        }else if(i==5){
            // 产值
            let res = await GetData('/getTypeList?type=CZ')
            output.value = res
        }
    }
}
const localclassval = ref("")
// 月份
let month = ref('')

// 获取当前月份
const getDate = ()=>{
  let nowDate = new Date()
  month.value = nowDate.getMonth()+1
  console.log(month.value,123123123);
}
const industryval = ref("")

// const scaleval = ref("1562246084026933249")
const scaleval = ref("")
const investval = ref("1560888947786821633")
const outputval = ref("1562629668130766850")

const selectChange = async (num)=>{
    // console.log(num);
}

</script>
<style scoped>
.body{
    width: 100%;
    height: auto;
}
.top{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
}
.one{
    width: 15%;
    height: 45%;
    margin-top: 1.3%;
    background-image: url(../../assets/imgs/xxxl.png);
    background-size: 100% 100%;
    
}
.one p{
    font-size: 0.9vw;
    margin-top: 1.4%;
    margin-left: 2%;
}
.ones{
    width: 30%;
    height: 50%;
    background-image: url(../../assets/imgs/soushuo.png);
    background-size: 100% 100%;
    cursor: pointer;
}
.search_box{
    display: flex;
}
.bottom{
    width: 100%;
    height: 90%;
    /* background-image: url(../../assets/imgs/xxbg.png);
    background-size: 100% 100%; */
    border: 1px solid #0078ae;
}
table{
    width: 100%;
    height: 100%;
    font-size: 0.2vw;
}
th{
    color: #fff;
}
tr:hover{
    background: #549dbe;
}
tr:first-child{
    height: 7%;
    width: 100%;
    background-image: url(../../assets/imgs/bt.png);
    background-size: 100% 100%;
}
td{
    color: #016390;
    text-align: center;
}
.select_style{
    height: 4vh;
    width: 12vw;
    
    border: 2px solid rgb(94, 94, 203);
}
</style>
